<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">揩车记录详情</view>
		</cu-custom>
		<view class='tui-notice-board'>
			<view class="tui-icon-bg">
				<text class="cuIcon-notification" style="color: rgb(245, 79, 70);"></text>
			</view>
			<view class="tui-scorll-view">
				<view class="tui-notice">红色为默认值，绿色为用户需要输入值！</view>
			</view>
		</view>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]" v-if="isShow" style="marginTop:70rpx;">
			<form @submit="formSubmit" @reset="formReset">
				<view :style="{marginBottom:100 + 'rpx'}">
					<view class="cu-form-group">
						<view class="title-default">揩车位置</view>
						<input type="text" disabled :value="'揩车位置'"/>
					</view>
					<view class="cu-form-group">
						<view class="title">揩车位置</view>
						<input type="text" name='LLREPPOSITION' placeholder="请输入" />
					</view>
					<!-- <view class="cu-form-group">
						<view class="title-default">揩车要求</view>
						<input type="text" disabled :value="'揩车要求'" />
					</view>
					<view class="cu-form-group">
						<view class="title">揩车要求</view>
						<input type="text" placeholder="请输入" />
					</view> -->
					<view class="cu-form-group">
						<view class="title-default">揩车方式</view>
						<input type="text" disabled :value="'揩车方式'" />
					</view>
					<view class="cu-form-group">
						<view class="title">揩车方式</view>
						<input type="text" name="LLREPTYPPE" placeholder="请输入" />
					</view>
					<!-- <view class="cu-form-group">
						<view class="title-default">油型号</view>
						<input type="text" disabled :value="'油型号'" />
					</view> -->
					<view class="cu-form-group">
						<view class="title-default">供应商</view>
						<input type="text" disabled :value="'供应商'" />
					</view>
					<!-- <view class="cu-form-group">
						<view class="title">油型号</view>
						<input type="text" placeholder="请输入" />
					</view> -->
					<view class="cu-form-group">
						<view class="title">供应商</view>
						<input type="text" name="LLPTNCODE" placeholder="请输入" />
					</view>
					<!-- <view class="cu-form-group">
						<view class="title-default">周期(天)</view>
						<input type="number" disabled :value="'30'" />
					</view>
					<view class="cu-form-group">
						<view class="title">周期(天)</view>
						<input type="number" placeholder="请输入" />
					</view>
					<view class="cu-form-group">
						<view class="title-default">油量(kg)</view>
						<input type="number" disabled :value="'30'" />
					</view>
					<view class="cu-form-group">
						<view class="title">油量单位</view>
						<picker @change="PickerChange1" name="LUNIT" :value="index1" :range="picker1" range-key="LNAME">
							<view class="picker">
								{{picker1[index1].LNAME}}
							</view>
						</picker>
					</view> -->
					<!-- <view class="cu-form-group">
						<view class="title">油量</view>
						<input type="number" name="youliang" placeholder="请输入" />
					</view> -->
					<view class="cu-form-group">
						<view class="title">明细备注</view>
						<textarea maxlength="-1" name="LLTSREMARK" placeholder="请输入明细备注"></textarea>
					</view>
					<view class="cu-form-group">
						<view class="title">上传图片</view>
						<view class="grid col-4 grid-square flex-sub" style="justify-content:flex-end">
							<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
								<image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</view>
				<button-father :Position="'tb-fa-fixed'">
					<button class="cu-btn bg-gradual-blue lg shadow tb-flex cu-btn-new" form-type="submit">确认</button>
				</button-father>
			</form>
		</view>
	</view>
</template>

<script>
	import ButtonFather from '@/colorui/components/ButtonFather.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				isShow: true,
				height:this.screenHeight,
				item:{},
				imgList: [],
				imagename: '',
				picker1:[
					{"LNAME":"KG"},
					{"LNAME":"只"},
					{"LNAME":"包"},
					{"LNAME":"袋"},
					{"LNAME":"瓶"},
				],
				index1:0,
			}
		},
		computed: {
			...mapGetters(['Style','Font','Wipegetitem','BackGround','BackGroundBox'])
		},
		onShow() {
			if(Object.keys(this.Wipegetitem).length) {
				console.log(this.Wipegetitem);
				for (let var1 in this.Wipegetitem) {
					this.$set(this.item,var1,this.Wipegetitem[var1])
				}
			}
		},
		onUnload() {
			this.delitem({})
		},
		components: {
			ButtonFather
		},
		methods: {
			...mapMutations(['setlubriclist','delitem','Wipesetlist']),
			PickerChange1(e) {
				this.index1 = e.detail.value
			},
			// 跳转详情
			jumpdetail(info,page) {
				uni.navigateTo({
					url: `/pages/home/Repair/Wipe/Wipedetail/Wipeadd/Wipeadddetail/Wipeadddetail?name=${info}&Page=${page}`
				})
			},
			formSubmit(e) {
				//定义表单规则
				var rule = [{
					name: "LLREPPOSITION",
					checkType: "notnull",
					errorMsg: "请输入揩车位置"
				}, {
					name: "LLREPTYPPE",
					checkType: "notnull",
					errorMsg: "请输入揩车方式"
				},{
					name: "LLPTNCODE",
					checkType: "notnull",
					errorMsg: "请输入供应商"
				}, ];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = this.$graceChecker.check(formData, rule);
				 if (!checkRes) {
					uni.showToast({
						title: this.$graceChecker.error,
						icon: "none"
					});
				} else if(this.imagename == '') {
					uni.showToast({
						title: '请上传图片',
						icon: "none"
					});
				} else {
					uni.navigateBack({
						delta: 1
					})
					e.detail.value['LPHOTO'] = this.imagename
					this.setlubriclist(e.detail.value)
					uni.showToast({
						title: '添加成功',
						icon: 'success',
						duration: 3000
					});
				}
			},
			// ---------------------------上传图片===================================
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认1
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: (res) => {
						this.imgList = res.tempFilePaths
						uni.uploadFile({
							url: uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT') + '/api/upload',
							filePath: this.imgList[0],
							header: {
								'token': uni.getStorageSync('token')
							},
							name: 'file',
							success: (res) => {
								console.log(JSON.parse(res.data));
								let myres = JSON.parse(res.data)
								console.log(myres.data);
								this.imagename = myres.data
							}
						})
					}
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			// -----------------------------------------------------------
		}
	}
</script>

<style>
	page {
		background-color: whitesmoke;
	}
	.tui-notice-board {
		position: fixed;
		z-index: 9;
		width: 100%;
		padding-right: 30rpx;
		font-size: 28rpx;
		height: 60rpx;
		background: #fff8d5;
		display: flex;
		align-items: center;
	}
	
	.tui-icon-bg {
		background: #fff8d5;
		padding-left: 30rpx;
		position: relative;
		z-index: 10;
		margin-right: 12rpx;
	}
	
	.tui-scorll-view {
		flex: 1;
		line-height: 1;
		white-space: nowrap;
		overflow: hidden;
		color: #f54f46;
	}
</style>
